<template>
  <div class="alarm-con">
    <Title title="参数异常提醒" />
    <div class="title-con">
      <div v-if="conList.length > 0" class="alarm-data-a" @click="showAlarmbtn">
        <el-button type="text"> 点击查看详细参数异常 </el-button>
      </div>
      <el-carousel v-if="conList.length > 0" :autoplay="true">
        <el-carousel-item v-for="(kit, indexk) in conList" :key="indexk">
          <div v-for="(itk, indexi) in kit" :key="indexi" class="hang">
            <div v-if="itk.detailResultList.length > 0" class="alarm-title red-alarm">红色预警</div>
            <br />
            <!-- <div v-if="itk.status === 2" class="alarm-title orange-alarm">
              橙色预警
            </div> -->
            <li v-if="itk.detailResultList.length > 0" :title="itk.facilityName + itk.detailResultList[0].dataTypeName + itk['detailResultList'][0].result">
              {{ itk.facilityName }}{{ itk.detailResultList[0].dataTypeName }}{{ itk['detailResultList'][0].result }}
            </li>
          </div>
        </el-carousel-item>
      </el-carousel>
      <!-- <div v-if="conList.length === 0" class="alarm-data" @click="showAlarm">
        <img src="~@/assets/conservation-model/alarm-add-btn.png" alt="" />
        添加告警数据
      </div> -->
    </div>
    <img
      src="~@/assets/conservation-model/lin1.png"
      class="bottom-img"
      alt=""
    />
    <el-dialog
      title="查看详细预警"
      :visible="causeDialogVisible"
      :modal-append-to-body="true"
      :append-to-body="true"
      :close-on-click-modal="true"
      custom-class="showDialog"
      class="showDialog dialogRec"
      :before-close="
        () => {
          causeDialogVisible = false;
        }
      "
    >
      <div class="facility-list">
        <div
          v-for="(item, index) in conBTNList"
          :key="index"
          class="facility-item"
        >
          <div class="info-line">
            <div class="name">
              关联设施：{{ item.facilityName }} 物联数据读取时间 :
              {{ item.startDate }}~{{ item.endDate }}
            </div>
            <!-- <div class="info-line"><div class="name">设施名称：</div><div class="value">{{ item.facilityName }}</div></div> -->
            <div
              v-for="(items, indexs) in item.detailResultList"
              :key="indexs"
              class="value"
            >
              <span>当前{{ items.dataTypeName }} : {{ items.currentValue
              }}{{ items.unit }}
              </span>
              <span>适宜 {{ items.dataTypeName }} : {{ items.expectMinValue
              }}{{ items.unit }}~{{ items.expectMaxValue
              }}{{ items.unit }}</span>
              <span>{{ items.result }}</span>
            </div>
          </div>
        </div>
        <!-- <div slot="footer" class="dialog-footer">
          <el-button class="zh-button-one" @click="causeDialogVisible = false">
            关 闭
          </el-button>
        </div> -->
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Title from "@/components/Title/index";
import alarmConfigApi from "@/api/digital-production/conservation-model/alarm-config";

export default {
  components: {
    Title
  },
  props: {
    plantingTypeNo: { type: [String, Number], default: "" }
  },
  data() {
    return {
      conList: [],
      batchNo: "",
      conBTNList: [],
      causeDialogVisible: false
    };
  },
  watch: {},
  created() {},
  mounted() {
    if (this.batchNo) {
      this.showAlarm(this.batchNo);
    }
  },
  methods: {
    showAlarm(e) {
      this.batchNo = e;
      let params = {
        batchNo: e,
        organizationNo: sessionStorage.organizationNo
      };
      let date = this.$moment(new Date()).valueOf();
      params.startDate = this.$moment(date - 60 * 1000).format(
        "YYYY-MM-DD HH:mm:ss"
      );
      params.endDate = this.$moment(date).format("YYYY-MM-DD HH:mm:ss");
      // console.log(date)
      alarmConfigApi.getDataByDate(params).then((res) => {
        if (res.code === 1) {
          this.traverList(res.data, 1);
        }
      });
    },
    traverList(arr, n) {
      // 拆分数组(轮播图格式)
      var list = [];
      for (let i = 0; i < arr.length; i += n) {
        list.push(arr.slice(i, i + n));
      }
      this.conList = list;
    },
    showAlarmbtn() {
      let params = {
        batchNo: this.batchNo,
        organizationNo: sessionStorage.organizationNo
      };
      let date = this.$moment(new Date()).valueOf();
      params.startDate = this.$moment(date - 60 * 1000).format(
        "YYYY-MM-DD HH:mm:ss"
      );
      params.endDate = this.$moment(date).format("YYYY-MM-DD HH:mm:ss");
      // console.log(date)
      alarmConfigApi.getDataByDate(params).then((res) => {
        if (res.code === 1) {
          this.conBTNList = res.data;
          this.causeDialogVisible = true;
        }
      });
    }
    // showAlarm() {
    //   this.$router.push({
    //     name: "AlarmConfig",
    //     query: { plantingTypeNo: this.plantingTypeNo }
    //   });
    // }
  }
};
</script>

<style lang="scss" scoped>
.alarm-con {
  height: 100%;
  width: 100%;
  position: relative;

  .bottom-img {
    position: absolute;
    bottom: 0;
    height: 1px;
    width: 100%;
  }
}
::v-deep .el-carousel {
  height: 100%;
  width: 100%;
}
::v-deep .el-carousel__container {
  height: 100%;
}
::v-deep .el-carousel__indicators--horizontal {
  display: none;
}
.title-con {
  display: flex;
  align-items: center;
  justify-content: center;
}

.alarm-title {
  padding: 5px 10px;
  margin: 0 5px 0 0;
  white-space: nowrap;
  font-size: 700;
  width: 100px;
  text-align: center;
}
.red-alarm {
  color: rgba(235, 39, 39, 1);
  background: url("~@/assets/conservation-model/alarm1.png");
  background-size: 100% 100%;
}
.orange-alarm {
  color: rgba(230, 134, 40, 1);
  background: url("~@/assets/conservation-model/alarm2.png");
  background-size: 100% 100%;
}
.hang {
  height: calc(100% - 10px);
  margin: 5px 0;
  padding: 0 10px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
  > li {
    width: 100%;
    list-style: none;
    color: #fff;
    font-size: 14px;
    line-height: 30px;
    // white-space: nowrap;
    word-wrap: break-word;
    // word-break: normal;
    // overflow: hidden; //溢出隐藏
    // text-overflow: ellipsis;
    cursor: pointer;
  }
}

.alarm-data {
  color: rgba(5, 235, 219, 1);
  font-size: 16px;
  display: flex;
  align-items: center;
}
.alarm-data-a {
  position: absolute;
  top: 8px;
  left: 150px;
  cursor: pointer;
}
.facility-list {
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  flex-wrap: wrap;
  .facility-item {
    width: 100%;
    margin-right: 3%;
    margin-bottom: 10px;
    // height: 80px;
    border-radius: 5px;
    // border: 1px solid #ccc;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.15);
    padding: 10px 20px;

    .info-line {
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      font-size: 14px;
      flex-direction: row;
      flex-wrap: wrap;
      &:not(:last-child) {
        margin-bottom: 10px;
      }
      .name {
        text-align: left;
        width: 100%;
        flex-shrink: 0;
        font-size: 20px;
        font-weight: 500;
      }
      .value {
        width: 100%;
        text-align: left;
        font-weight: normal;
        margin: 10px 0;
        font-size: 16px;
        span {
          display:inline-block;
          &:nth-child(1) {
            width: 25%;
          }
          &:nth-child(2) {
            width: 25%;
          }
          &:nth-child(3) {
            width: 25%;
          }
        }
      }
    }
  }
}
</style>
